import React from "react";
import DragModal from "./components";
import { Modal, Button, Tooltip } from "antd";
import "antd/dist/antd.css";
class App extends React.Component {
  state = { visible: false, visible2: false };

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };
  showModal2 = () => {
    this.setState({
      visible2: true
    });
  };

  handleOk2 = e => {
    console.log(e);
    this.setState({
      visible2: false
    });
  };

  handleCancel2 = e => {
    console.log(e);
    this.setState({
      visible2: false
    });
  };

  render() {
    return (
      <div>
        <Tooltip title="adfadsfasdf">
          <Button type="primary" onClick={this.showModal}>
            Open Modal
          </Button>
        </Tooltip>
        <DragModal
          // title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          draggable
          mask={true}
          width={600}
          maskClosable={false}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <Button type="primary" onClick={this.showModal2}>
            Open Modal2
          </Button>
        </DragModal>
        <DragModal
          title="Basic Modal"
          visible={this.state.visible2}
          onOk={this.handleOk2}
          onCancel={this.handleCancel2}
          mask={true}
          maskClosable={false}
          height={200}
        >
          222222222222
        </DragModal>
      </div>
    );
  }
}
export default App;
